<template>
    <div>
        <div class="topTitle">
            <i class="iconfont location">&#xe64b;</i>
            <span>当前位置：上传材料</span>
        </div>
        <div>
            <p class="upData">上传材料操作：</p> 
            <!-- <p class="upList">1.下载材料模板、打印、签字、拍照上传</p>
            <p class="upList">2.材料照片命名规则：学生姓名+手机号，形如：张三+18762626262.jpg</p> -->

            <div class="stepList">
                <el-steps :active="3" align-center>
                    <el-step title="步骤 1" description="下载模板，根据模板填写，打印，签字，拍照"></el-step>
                    <el-step title="步骤 2" description="选择上传图片（命名规则：学生姓名+手机号，形如：张三+18762626262.jpg）"></el-step>
                    <el-step title="步骤 3" description="确定上传图片"></el-step>
                </el-steps>
            </div>
            <div class="stepOperate">
                <div class="modelLoad" >
                     <a href="../../../static/新员工岗前培训确认表.xls" download="新员工岗前培训确认表.xls">点击下载确认表</a>
                </div>
                <div class="selectImg">
                     <input type="file" ref="pathClear" @change="getFile($event)" accept=".jpg,.jpeg,.png,.bmp" multiple="multiplt">
                </div>
                <div class="uploadbtn">
                     <input type="submit" @click="submitAddFile" value="上传" >
                </div>
                   
            </div>
        </div>
        <div class="fileTable">
                 <el-table
                  :data="tableData"
                  height="315"
                  border
                  style="width: 100%;">
                  <el-table-column
                  prop="rownum"
                  label="序号"
                  width="50"
                  align="center">
                  </el-table-column>
                  <el-table-column
                  prop="picname"
                  label="文件名称"
                  align="center">
                  </el-table-column>
                  <el-table-column
                  prop="uptime"
                  label="上传时间"
                  width="250"
                  align="center">
                  </el-table-column>
                  <el-table-column label="操作"
                  width="200"
                  align="center">
                  <template slot-scope="scope">
                       <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                  </el-table-column>
              </el-table>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      addArr: [],
      tableData: []
    };
  },
  mounted: function() {
    this.getPicList();
  },
  methods: {
    //选择文件
    getFile(event) {
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //上传类型判断
        var imgName = file[i].name;
        var idx = imgName.lastIndexOf(".");
        if (idx > 0) {
          var ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext == "jpg" || ext == "jpeg" || ext == "png" || ext == "bmp") {
            this.addArr.push(file[i]);
            // console.log(this.addArr)
          }
        }
      }
    },
    //上传
    submitAddFile() {
      if (this.addArr.length == 0) {
        this.$message({
          type: "info",
          message: "请选择要上传的文件"
        });
        return;
      }

      var formData = new FormData();
      for (var i = 0; i < this.addArr.length; i++) {
        formData.append("fileUpload", this.addArr[i]);
      }
      this.addArr = [];
      //   console.log(formData);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      var dtid = this.$store.state.dtid;
      // console.log("isaz:" + isaz);
      this.$axios
        .post("/Picture/" + dtid + "/V1", formData, config)
        .then(response => {
          if (response.data == "loginout") {
            this.$message({
              type: "info",
              message: "登录信息失效，请重新登录！"
            });
            this.$router.push("/login");
          } else if (response.data == "empty") {
            this.$message({
              type: "info",
              message: "上传内容为空！"
            });
          } else if (response.data == "success") {
            this.$message({
              type: "success",
              message: "上传成功！"
            });
            this.getPicList();
          } else {
            this.$alert(response.data, "提示", {
              confirmButtonText: "确定"
            });
            this.getPicList();
          }
        });
      this.$refs.pathClear.value = "";
    },
    //获取材料列表
    getPicList() {
      var dtid = this.$store.state.dtid;
      this.$axios.get("/Picture/" + dtid + "/V2", {}).then(json => {
        if (json.data == "loginout") {
          this.$message({
            type: "info",
            message: "登录信息失效，请重新登录！"
          });
          this.$router.push("/login");
        } else {
          var picList = json.data;
          var piclistdata = [];
          for (let i = 0; i < picList.length; i++) {
            var item = {
              ptid: picList[i].Pt_Id,
              rownum: i + 1,
              picname: picList[i].Pt_Name,
              uptime: picList[i].Pt_Time
            };
            piclistdata[i] = item;
          }
          this.tableData = piclistdata;
        }
      });
    },
    //删除，物理删除
    handleDelete(index, row) {
      var id = row.ptid;
      // console.log(id);
      this.$confirm("确定要删除选中的文件吗?", "提示").then(() => {
        this.$axios
          .delete("/Picture/" + id + "/V3")
          .then(json => {
            if (json.data == 1) {
              this.$message({
                type: "success",
                message: "删除成功！"
              });
              this.getPicList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败！"
              });
            }
          })
          .catch(error => {});
      });
    }
  }
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont"; /* project id 1492498 */
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot");
  src: url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.woff") format("woff"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1492498_2d2muem3r5x.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.topTitle {
  border-bottom: 1px solid #e5e5e5;
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  color: #64a4f6;
}
.location {
  color: #64a4f6;
  font-size: 30px;
  vertical-align: bottom;
}
.upData {
  margin-left: 35px;
}
.upList {
  margin-left: 35px;
}
.stepList {
  /* width: 500px; */
  /* height: 120px; */
  margin: 0 40px;
  /* border:1px solid red; */
}
.stepOperate {
  /* width: 500px; */
  /* height: 400px; */
  margin: 15px 20px 30px 20px;
  /* border:1px solid red; */
  text-align: center;
}
.stepOperate a {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 3px;
  background: #73d25a;
  color: white;
}
.modelLoad,
.selectImg,
.uploadbtn {
  display: inline-block;
}
.modelLoad {
  /* height: 176px;
  line-height: 90px; */
  cursor: pointer;
  width: 20%;
  /* border: 1px solid red; */
}
.selectImg {
  width: 45%;
  /* border: 1px solid red; */
}
.selectImg input {
  width: 200px;
}
.uploadbtn {
  width: 18%;
  /* text-align: center; */
  /* border: 1px solid red; */
}
.uploadbtn input {
  font-size: 15px;
  width: 80px;
  height: 30px;
  cursor: pointer;
  color: #fff;
  background: #639ef4;
  border: none;
  border-radius: 3px;
}
.fileTable {
  margin: 0 20px;
}

@media screen and (min-width: 1441px) and (max-width: 1960px) {
  .el-table {
    height: 450px !important;
  }
}
</style>

